<template>
	<view>
		<!-- pages/goodsType/index.wxml -->
		<!-- 头部 -->
		<navber id="head-navber" :navbarData="navbarData"></navber>
		<!-- 搜索框 -->
		<view class="search">
			<view class="search-layer">
				<view class="search-input">
					<input placeholder="输入您想查找的商品" @tap="confirm_keyword" />
				</view>
				<view class="search-confirm" @tap="confirm_keyword">
					<image :src="imgUrl + '/imgs/search.png'"></image>
				</view>
			</view>
		</view>
		<!-- 分类列表 -->
		<view class="types" :style="'height:' + listHeight + 'px;'">
			<view class="types-left">
				<view :class="'types-left-item ' + (index == tpye_index ? 'types-left-item-active' : '')"
					@tap="typeConfirm" :data-index="index" v-for="(item, index) in type_nav" :key="index">
					<view class="types-left-item-line" v-if="index == tpye_index"></view>

					{{ item.name }}
				</view>
			</view>
			<scroll-view class="types-right" :style="'height:' + listHeight + 'px;'" :scroll-y="true"
				:scroll-with-animation="true" :scroll-into-view="'goods_index' + right_tpye_index">
				<view class="types-right-info" :data-id="item.id" v-for="(item, index) in type" :key="index">
					<view class="types-right-info-title" @tap="onGoGoodsList" data-level="2" :data-id="item.id"
						:data-name="item.name">
						<view class="types-info-title-name">{{ item.name }}</view>
						<view class="types-info-title-icon"></view>
					</view>

					<view class="types-right-info-item" @tap="onGoGoodsList" data-level="3" :data-id="itemx.id"
						:data-name="itemx.name" v-for="(itemx, indexx) in item.child" :key="itemx.indexx">
						<view class="types-img">
							<image :src="itemx.img"></image>
						</view>

						<view class="types-right-info-name">{{ itemx.name }}</view>
					</view>
				</view>
				<!-- 底部 -->
				<view class="types-right-notice">
					<view class="types-right-notice-font">已经到底啦</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import navber from '@/components/navber/index';

	// pages/goodsType/index.js
	const app = getApp();

	const Config = require('../../config/index.js');

	const Api = require('../../api/index.js');

	export default {
		components: {
			navber
		},
		data() {
			return {
				navbarData: {
					title: '分类' //顶部标题
				},
				//导航栏
				imgUrl: Config.imgUrl,
				//图片url
				loca_address: {
					nation: '',
					//国
					province: '',
					//省
					city: '',
					//市
					district: '',
					//区
					street: '',
					//街道
					street_number: '' //门牌
				},
				//定位地址
				listHeight: 0,
				parent_id: '',
				//一级分类id
				type_nav: [],
				//一级分类导航
				type: [],
				//二级分类
				tpye_index: 0,
				//左边下标默认0
				right_tpye_index: 0,
				//右边下标默认0
				selects: 'goods',
				business: 1
			};
		},
		onReady() {
			this.setHeight();
		},
		onShow() {
			this.setData({
				loca_address: app.globalData.addressInfo
			});
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh: function() {
			this.getList();
			uni.stopPullDownRefresh();
		},
		methods: {
			confirm_keyword: function(e) {
				// 确认搜索
				uni.navigateTo({
					url: '/pages/search/index'
				});
			},
			onParentChange(e) {
				let parent_id = this.type_nav[e.detail.index].id;
				var json = {
					parent_id: parent_id
				};
				this.setData({
					type: []
				});
				Api.goodsTypeSecond(json).then((res) => {
					this.setData({
						type: res.data
					});
				});
			},
			typeConfirm(e) {
				//分类确认点击
				this.setData({
					tpye_index: e.currentTarget.dataset.index,
					right_tpye_index: e.currentTarget.dataset.index
				});
				let parent_id = this.type_nav[e.currentTarget.dataset.index].id;
				var json = {
					parent_id: parent_id
				};
				let that = this;
				that.setData({
					type: []
				});
				Api.goodsTypeSecond(json).then((res) => {
					that.setData({
						type: res.data
					});
				});
			},

			setHeight() {
				// 设置高度
				var _this = this;
				const query = uni.createSelectorQuery();
				query.select('#head-navber').boundingClientRect();
				query.select('.search').boundingClientRect();
				query.exec(function(res) {
					if (res[0].height == 240 || res[0].height == 0) {
						_this.setHeight(); //回调获取
						return;
					}
					uni.getSystemInfo({
						success(res1) {
							_this.setData({
								listHeight: res1.windowHeight - (res[0].height + res[1].height)
							});
						}
					});
				});
			},

			onGoGoodsList(e) {
				let type_id = e.currentTarget.dataset.id;
				let name = e.currentTarget.dataset.name;
				let level = e.currentTarget.dataset.level; // 商品跳转

				uni.navigateTo({
					url: '/pages/goodsType/goods/index?type_id=' + type_id + '&name=' + name + '&level=' + level
				});
			},

			goodsDetail(e) {
				// 商品详情
				uni.navigateTo({
					url: '/pages/goodsDetail/index?id=' + e.currentTarget.dataset.id
				});
			},

			catDetail(e) {
				// 商品详情
				uni.navigateTo({
					url: '/pages/catDetail/index?id=' + e.currentTarget.dataset.id
				});
			},

			getList() {
				let that = this;
				Api.goodsTypeFirst().then((res) => {
					that.setData({
						type_nav: res.data
					});
					let parent_id = 0;
					if (that.type_nav) {
						parent_id = that.type_nav[0].id;
					}
					var json = {
						parent_id: parent_id
					};
					that.setData({
						type: []
					});
					Api.goodsTypeSecond(json).then((res) => {
						that.setData({
							type: res.data
						});
					});
				});
			},

			switchShowAttr(e) {
				//显示规格选择
				let index = e.currentTarget.dataset.index;
				let index1 = e.currentTarget.dataset.index1;
				let type = this.type;
				if (type[index].goodslist[index1].attr_show) {
					type[index].goodslist[index1].attr_show = false;
				} else {
					type[index].goodslist[index1].attr_show = true;
				}
				this.setData({
					type: type
				});
			},

			addCart(e) {
				let index = e.currentTarget.dataset.index;
				let index1 = e.currentTarget.dataset.index1;
				let index2 = e.currentTarget.dataset.index2;
				let goods_id = e.currentTarget.dataset.goods.goods_id;
				let attribute_ids = e.currentTarget.dataset.goods.attribute_ids;
				let goods_number = 1;
				let type = this.type;
				type[index].goodslist[index1].goods_common_list[index2].goods_number = goods_number;
				this.editCartAttr(goods_id, attribute_ids, goods_number, type);
			},

			onNumChange(e) {
				//购物车数据修改
				let index = e.currentTarget.dataset.index;
				let index1 = e.currentTarget.dataset.index1;
				let index2 = e.currentTarget.dataset.index2;
				let goods_id = e.currentTarget.dataset.goods.goods_id;
				let attribute_ids = e.currentTarget.dataset.goods.attribute_ids;
				let goods_number = e.detail;
				let type = this.type;
				type[index].goodslist[index1].goods_common_list[index2].goods_number = goods_number;
				this.editCartAttr(goods_id, attribute_ids, goods_number, type);
			},

			getMyCartData() {
				//刷新购物车数量
				Api.goodsMyCart().then((res) => {
					var data = res.data;
					var cat_sum = data.cat_sum;

					if (cat_sum == 0) {
						uni.removeTabBarBadge({
							index: app.globalData.catIndex
						});
					} else {
						uni.setTabBarBadge({
							index: app.globalData.catIndex,
							text: cat_sum + ''
						});
					}
				});
			},

			editCartAttr(goods_id, attribute_ids, goods_number, type) {
				//修改数据
				var json = {
					goods_id: goods_id,
					attribute_ids: attribute_ids,
					goods_number: goods_number
				};
				let that = this;
				Api.goodsAddCart(json).then((res) => {
					if (res.code != 1) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					} else {
						that.setData({
							type: type
						});
					}

					that.getMyCartData();
				});
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			const app = getApp();
			// console.log(app.globalData.popularize_code);
			var rand = Math.random() * 100;
			return {
				title: app.globalData.title + '：更多优惠的商品等您来选购哦！',
				path: '/pages/index/index?code=' + app.globalData.popularize_code,
				imageUrl: Config.imgUrl + '/imgs/share.png?rand=' + rand
			};
		},
		onShareTimeline: function() {
			const app = getApp();
			// console.log(app.globalData.popularize_code);
			var rand = Math.random() * 100;
			return {
				title: app.globalData.title + '：更多优惠的商品等您来选购哦！',
				path: '/pages/index/index?code=' + app.globalData.popularize_code,
				imageUrl: Config.imgUrl + '/imgs/share.png?rand=' + rand
			};
		}
	};
</script>
<style>
	@import './index.css';
</style>
